<script setup lang="ts">
//  import { useUserStore } from "../store/user.js";
//  const user = useUserStore();
 import HeaderPage from "@/comonents/HeaderPage.vue";
 import ClassifyPage from "@/comonents/ClassifyPage.vue";
 import SwiperPage from "@/comonents/SwiperPage.vue";
 import UserOrUnlogin from "@/comonents/UserOrUnlogin.vue";
 import CourseList from "@/comonents/CourseList.vue";
 </script>

<template>
  <div class="w-full">
    <!-- 海报图 -->
    <img
      src="https://file.xdclass.net/video/2023/banner/618/QD.gif"
      class="poster-image"
    />
    <!-- 头部导航 -->
    <div class="navigation-header">
      <div class="nav-inner">
        <HeaderPage />
      </div>
    </div>
    <!-- 主要内容部分 -->
    <div class="main-content">
      <div class="content-layout">
        <!-- 分类导航 -->
        <ClassifyPage />
        <!-- 轮播图 -->
        <SwiperPage />
        <!-- 新人福利 -->
        <UserOrUnlogin />
      </div>
      <!-- 高单价导航 -->
       <CourseList />
      <!-- 课程分类列表 -->
    </div>
    <!-- 底部的内容导航 -->
  </div>
  <!-- 提醒登录浮层组件 -->

  <!-- <div class="text-xs text-red-500">home</div>
  <span>{{ user.token }}</span>
  <el-button type="primary">按钮</el-button>
  <el-icon><Search /></el-icon> -->
</template>

<style scoped>
/* 海报图样式 */
.poster-image {
  width: 100%;
  height: auto;
  display: block;
}

/* 导航头部样式 */
.navigation-header {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  background: white;
}

.nav-inner {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px 0;
}

/* 主要内容区域样式 */
.main-content {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 16px;
}

.content-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* 分类区域样式 */
.category-section {
  flex: 0 0 240px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 轮播图区域样式 */
.swiper-section {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 280px;
}

/* 用户区域样式 */
.user-section {
  flex: 0 0 280px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

/* 课程列表区域样式 */
.course-section {
  margin-top: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 1240px) {
  .nav-inner, .main-content {
    width: 95%;
    max-width: 1200px;
  }

  .content-layout {
    flex-wrap: wrap;
  }

  .category-section {
    flex: 0 0 100%;
    margin-bottom: 20px;
  }

  .swiper-section {
    flex: 0 0 calc(65% - 10px);
  }

  .user-section {
    flex: 0 0 calc(35% - 10px);
  }
}

@media (max-width: 768px) {
  .content-layout {
    flex-direction: column;
  }

  .swiper-section, .user-section {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>
